<!--
* author: mimingguang
* created: 2018/6/1
* describe:
-->
<template>
  <div class="tree-list fix">
    <div class="transferData clearfix">
      <div class="transferLabel fl" v-show="true">
        <el-checkbox v-model="node.checked" @change="changeChild(node,node.checked);">
          <span class="transferNum" v-if="node.num" :title="node.num===node.name?node.num:''">{{node.num}}</span>
          <span class="transferName" :title="node.name">{{node.num===node.name?'':node.name}}</span>
        </el-checkbox>
      </div>
      <div class="transferBtn fr clearfix">
        <i v-show="node.children" :class="node.open?'el-icon-minus':'el-icon-plus'" @click.stop="node.open = !node.open;getChild(node.id)"></i>
        <i class="iconfont icon-yijianfankui" @click.stop="jsCopy(node.name)"></i>
      </div>
    </div>
    <tree-list v-show="node.open" v-for="item in node.children" :node="item" :key="item.id" @chooseTree="changeChild" @getSomeChild="getChild"></tree-list>
  </div>
</template>

<script>
export default {
  name: "TreeList",
  componentName: "TreeList",
  props: {
    node: {
      default() {
        return {
        };
      }
    }
  },
  methods: {
    jsCopy: function(str) {
      // 创建元素用于复制
      var aux = document.createElement("input");
      // 获取复制内容
      var ee = str; //对象是ttsText
      // 设置元素内容
      aux.setAttribute("value", ee);
      document.body.appendChild(aux);
      // aux.style.display = "none";
      aux.style.cssText='width: 1px;height: 1px;position: absolute;top: -1px;left: -1px;background: transparent;';

      // 复制内容
      aux.select();
      // ee.select(); //选择对象 （全选）
      document.execCommand("Copy"); //执行浏览器复制命令
      this.$message({
          message: "复制成功",
              duration: 1500,
          center: true
        });
    },
    changeChild: function(node,val) {
      // $('.transferData').removeClass('active');
      // $(e.target).parents('.transferData').eq(0).addClass('active');
      this.$emit("chooseTree", node);
    },
    getChild: function(key) {
      this.$emit("getSomeChild", key);
    }
  },
  mounted: function() {
  }
};
</script>

<style lang="scss">
.tree-list {
  width: 290px;
  position: relative;
    & > .tree-list{
      width: calc(100% - 20px);
      margin-left: 20px;
    }
  .transferData {
    margin-right: 30px;
    span.el-checkbox__label{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - 20px);
      text-align: left;
    }
    .transferLabel {
      width: 100%;
      label.el-checkbox{
        width: 100%;
      }
      span.el-checkbox__input{
        line-height: 21px;
        float: left;
      }
      .transferNum {
        color: #9e9e9e;
        margin-right: px2(35);
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      .transferName {
        color: #000;
      }
      .transferName.active {
        color: #5e5f75;
      }

    }
  }
  .transferData.active {
    background-color: #dcf3ff;
  }
  .transferBtn{
    position: absolute;
    right: -15px;
    width: 35px;
    & i {
      color: $mainColor;
      font-weight: bold;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
    }
    i:nth-child(1){
      float: left;
    }
    i:nth-child(2){
      float: right;
    }
  }
}
</style>
